<template>
    <div class="pay-sure" :style="style">
        <div class="sure-img">
            <img :src="payImg | imageFmt">
        </div>
        <div class="sure-tips">
            <div>官方提醒您</div>
            <div>您将使用微信进行支付</div>
            <div class="money">{{payAmount | moneyFmt(2, '￥')}}</div>
        </div>
        <div class="confirm-btn">
            <div class="sure-btn" @click="confirmToPay">确认支付:{{payAmount | moneyFmt(2, '￥')}}</div>
        </div>
        <confirm ref="expired" :text="confirmText" :isAlert="isExpired" @confirm="OrderExpired"/>
        <RecgoodsPop ref="recgoods" :recinfo="recgoodsInfo" @cancel="cancel" v-if="recgoodsInfo"></RecgoodsPop>
    </div>
</template>

<script>
    import Confirm from '../../components/common/confirm';
    import RecgoodsPop from '../../components/Activity/recgoods-pop';
    import API from '../../request/api';
    import wx from 'weixin-js-sdk';

    const HEIGHT = document.documentElement.clientHeight + 'px';

    export default {
        name: 'pay-sure-wechat',
        components: {Confirm, RecgoodsPop},
        data() {
            return {
                style: {
                    height: HEIGHT
                },
                payImg: 'wx-pay',
                payAmount: '',
                ticket: '',
                redirect: '',
                isExpired: false, //是否過期
                BtnText: '确定',
                confirmText: '',
                recgoodsInfo: {},
                payData: {},
                interState: false
            };
        },
        computed: {
            systemId() {
                return this.$store.state.login.system;
            },
        },
        created() {
            if (window.__wxjs_environment === 'miniprogram') {
                //    判断是否小程序环境
                this.interState = true;
            }
            this.payData = this.$store.state.online.createPayData;
            this.ticket = this.payData.getWayData.ticket_id;
            this.payAmount = this.payData.total;
        },
        methods: {
            getActiveTips() {
                // if (this.$store.state.login.userInfo.uid == '21755592') {
                //     alert(111111)
                let data = this.$store.state.user.ticketArr[this.systemId];
                console.log('getdata:', data);
                // 获取 是否弹出七夕推荐商品弹窗
                this.request.get(API.getActiveTips, {
                    ticket_id: data[0],
                    last_ticket_id: data[1]
                }).then((result) => {
                    console.log('getActiveTips-result', result);
                    this.recgoodsInfo = result;
                    // this.recgoodsInfo.ticket = getData.ticket_id;
                    if (result.is_tips) {
                        this.$refs.recgoods.show();
                    } else {
                        this.cancel();
                    }
                });
                // } else {
                //     this.cancel()
                // }
            },
            cancel() {
                let redirect;
                //支付成功
                if (this.payData.groupid) {
                    redirect = '/group-order-detail?pid=' + this.payData.getWayData.target_id;
                } else {
                    redirect = '/user';
                }
                this.$router.replace(redirect);
            },
            confirmToPay() {
                // if (this.$route.query.type === 'wxQr') {
                //     //二维码显示
                //     this.$router.push({
                //         name: 'wx-pay-code'
                //     });
                // }
                if (this.interState) {
                    // this.request.post(API.payopenid).then(res => {
                        // 小程序环境支付
                        wx.miniProgram.navigateTo({
                            url: '/pages/pay?ticket_id=' + this.ticket + '&token=' + this.$store.state.login.token + '&type=' + this.payData.type + '&pid=' + this.payData.getWayData.target_id + '&system=' + this.$store.state.login.system
                        });
                        // type=2拼团
                    // }).catch();

                } else {
                    let that = this;
                    this.request.post(API.PayPassConfirm, {
                        ticket_id: that.ticket
                    }).then((result) => {
                        console.log('redirect-result', result);
                        if (result.msg === 'Success') {
                            let pay_info = JSON.parse(result.jsapi_pay_info);
                            console.log(pay_info, 'pay_infopay_infopay_info');
                            WeixinJSBridge.invoke('getBrandWCPayRequest', {
                                'appId': pay_info.appId,
                                'timeStamp': pay_info.timeStamp,
                                'nonceStr': pay_info.nonceStr,
                                'package': pay_info.package,
                                'signType': pay_info.signType,
                                'paySign': pay_info.paySign
                            }, function (res) {
                                let payData = that.$store.state.online.createPayData;
                                console.log('WeixinJSBridge-err_msg', res.err_msg, 'payData', payData);
                                if (res.err_msg === 'get_brand_wcpay_request:fail') {
                                    console.log('redirect-fail', that.redirect);
                                    //支付失败
                                    that.redirect = '/order-list-new?active=1';
                                    if (payData.type == 3) {
                                        that.redirect = '/shopOrderList?active=1';
                                    }
                                    if (payData.type == 4) {
                                        that.redirect = '/group-order-list';
                                    }
                                } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
                                    console.log('redirect-cancel', that.redirect);

                                    //支付过程中用户取消
                                    that.redirect = '/order-list-new?active=1';
                                    if (payData.type == 3) {
                                        that.redirect = '/shopOrderList?active=1';
                                    }
                                    if (payData.type == 4) {
                                        that.redirect = '/group-order-list';
                                    }
                                } else if (res.err_msg === 'get_brand_wcpay_request:ok') {
                                    console.log('redirect-ok', that.redirect);
                                    that.getActiveTips();
                                }
                                console.log('redirect-', that.redirect);
                                that.$router.replace(that.redirect);
                            });
                        } else if (result.status === 'no') {
                            this.BtnText = '确定';
                            this.confirmText = result.msg;
                            this.redirect = result.redirect;
                            this.$refs.expired.show();// 弹出提示弹框
                        }
                    });
                }
            },
            OrderExpired() {
                this.$router.replace(this.redirect);
            },
            arouseWxPay() {
                WeixinJSBridge.invoke('getBrandWCPayRequest', {
                    'appId': 'wxd678efh567hg6787',  //公众号名称，由商户传入
                    'timeStamp': '1393848473', //时间戳 这里随意使用了一个值
                    'nonceStr': '5K8264ILTKCH16CQ2502SI8ZNMTM67VS', //随机串
                    'package': 'prepay_id=u802345jgfjsdfgsdg88',
                    'signType': 'MD5', //微信签名方式:MD5
                    'paySign': 'C380BEC2BFD727A4B6845133519F3AD6' //微信签名
                }, function (res) {
                    if (res.err_msg == 'get_brand_wcpay_request:fail') {
                        //支付失败
                    } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
                        //支付过程中用户取消
                    } else if (res.err_msg == 'get_brand_wcpay_request:ok') {
                        //支付成功
                    }
                });
            }
        },
    };
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
    @import '~@/assets/main.styl';

    .pay-sure {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 100%;

        /* background-color grayF */

        .sure-img {
            margin-top: -30%;

            img {
                width: vw(86);
                height: vw(86);
            }
        }

        .sure-tips {
            margin-top: vw(40);
            word-vw(word14, gray3);
            line-height: vw(26);

            .money {
                margin-top: vw(10);
                word-vw(word20, main-color);
            }
        }

        .confirm-btn {
            width: 100%;
            height: vw(55);
            background: grayF;
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .sure-btn {
            big-solid();
            height: vw(35);
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>
